<template>
  <div class="box">
    <div class="headerBox">
      <p class="list">商品管理</p>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="用户管理"
          name="first"
        >
        </el-tab-pane>
        <el-tab-pane
          label="配置管理"
          name="second"
        >
        </el-tab-pane>
        <el-tab-pane
          label="角色管理"
          name="third"
        >
        </el-tab-pane>
        <el-tab-pane
          label="定时任务补偿"
          name="fourth"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="shenBox">
      <el-form
        :model="businessList"
        label-width="80px"
        size="small"
      >
        <el-row :gutter="30">
          <el-col :span="4">
            <el-form-item label="用户搜索:">
              <el-input
                v-model="businessList.card"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <div class="souBox">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="medium"
            >搜索</el-button>
            <el-button size="medium">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="medium"
              @click="autotrophyAdd"
            >新增</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
          color:'#333',
          textAlign: 'center',
          fontSize:'14px'
        }"
      >
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="220"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="220"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="background-color:white;width:100%;height:50px;">
      <el-pagination
        :page-sizes="[10,20,30,40,50,100]"
        :page-size="listQuery.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="listQuery.page"
      />
    </div>
    <add
      v-if="showEzhanAdd"
      v-model="EzhanAddShow"
      :action-data="EzhanAddData"
      @showEzhanAddCheck="handleEzhanAdd"
    />
  </div>
</template>
<script>
import add from '../components/add.vue'
export default {
  name: 'mall',
  components: {
    add
  },
  data() {
    return {
      showEzhanAdd: false,
      EzhanAddShow: false,
      EzhanAddData: {},
      // 分页
      total: 0,
      listQuery: {
        page: 1,
        page_size: 10
      },
      // 主页请求加载
      loading: false,
      activeName: 'second',
      businessList: {
        card: ''
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    autotrophyAdd(index) {
      this.showEzhanAdd = true
      this.EzhanAddShow = true
      this.EzhanAddData = {
        index
      }
    },
    handleEzhanAdd() {
      this.showEzhanAdd = false
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  background-color: #f5f7f9;
}
.headerBox {
  width: 100%;
  height: 100px;
  background-color: white;
}
.list {
  font-size: 22px;
  margin-bottom: 32px;
  font-weight: 100;
}
.shenBox {
  width: 100%;
  height: 80px;
  margin-top: 10px;
  background-color: white;
  padding-top: 23px;
  box-sizing: border-box;
}
.souBox {
  float: right;
  margin-right: 20px;
}
.tableBox {
  background-color: white;
}
.el-pagination {
  float: right;
  margin-top: 10px;
  padding-bottom: 30px;
}
</style>